<template>
	<!-- 图表页面 -->
	<div class="container">

		<div class="right-content-top" style="margin-bottom: 10px; width:70vw">
			<div class="header-info" style="padding-left:0 !important;">
				<div class="bg-info" style="background:#98ffff">
					<div class="icon-wrapper">
						<span class="tit">原料仓库总成本</span>
						<!-- <span class="num">{{ topInfoList.yl }}</span> -->
						<countTo class="num" :decimals="2" :startVal='0' :endVal='topInfoList.yl ? topInfoList.yl : 0' :duration='3000'>
						</countTo>
					</div>
				</div>
			</div>
			<div class="header-info">
				<div class="bg-info" style="background:#B3E19D">
					<div class="icon-wrapper">
						<span class="tit">定制料总成本</span>
						<!-- <span class="num">{{ topInfoList.yl }}</span> -->
						<countTo class="num" :decimals="2" :startVal='0' :endVal='topInfoList.dz ? topInfoList.dz : 0' :duration='3000'>
						</countTo>
					</div>
				</div>
			</div>
			<div class="header-info">
				<div class="bg-info" style="background:#79d4f4">
					<div class="icon-wrapper">
						<span class="tit">包材仓库总成本</span>
						<!-- <span class="num">{{ topInfoList.bc }}</span> -->
						<countTo class="num" :decimals="2" :startVal='0' :endVal='topInfoList.bc ? topInfoList.bc : 0' :duration='3000'>
						</countTo>
					</div>
				</div>
			</div>
			<div :span="6" class="header-info">
				<div class="bg-info" style="background:#ffbc67">
					<div class="icon-wrapper">
						<span class="tit">线缆仓库总成本</span>
						<!-- <span class="num">{{ topInfoList.xl }}</span> -->
						<countTo class="num" :decimals="2" :startVal='0' :endVal='topInfoList.xl ? topInfoList.xl : 0' :duration='3000'>
						</countTo>
					</div>
				</div>
			</div>

			<div :span="6" class="header-info">
				<div class="bg-info" style="background:#c184f6">
					<div class="icon-wrapper">
						<span class="tit">海外仓库总成本</span>
						<!-- <span class="num">{{ topInfoList.hwc }}</span> -->
						<countTo class="num" :decimals="2" :startVal='0' :endVal='topInfoList.hwc ? topInfoList.hwc : 0'
							:duration='3000'></countTo>
					</div>
				</div>
			</div>
		</div>

		<a-row style="width:70vw; margin-bottom:20px;">
			<a-card title='采购模块'>
				<div slot="extra">
					<a-form layout="inline">
						<a-form-item label="年份">
							<a-select mode="tags" size="small" :defaultValue="String(new Date().getFullYear())" placeholder="请选择年份"
								style="width: 200px" @change="handleChange">
								<a-select-option :disabled='item.disable' :value="item.value" v-for="item in yearOptions"
									:key="item.value">
									{{ item.label }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-form>
				</div>
				<a-radio-group v-model="materialType" button-style="solid" @change="handleChange(years, materialType)">
					<a-radio-button value="1473944069297156097">原料采购</a-radio-button>
					<a-radio-button value="1843830985384407041">定制料采购</a-radio-button>
					<a-radio-button value="1473944715475824641">包材采购</a-radio-button>
					<a-radio-button value="1473944389062504450">线缆采购</a-radio-button>
				</a-radio-group>
				<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
				<div ref="charts" id="main" style="width: 1000px;height:400px;"></div>
			</a-card>
		</a-row>

		<a-row style="width:70vw; margin-bottom:20px;">
			<a-card title='总成本'>
				<div slot="extra">
					<a-form layout="inline">
						<a-form-item label="年份">
							<a-select mode="tags" size="small" :defaultValue="String(new Date().getFullYear())" placeholder="请选择年份"
								style="width: 200px" @change="handleChange1">
								<a-select-option :disabled='item.disable' :value="item.value" v-for="item in yearOptions"
									:key="item.value">
									{{ item.label }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-form>
				</div>
				<a-radio-group v-model="materialType_1" button-style="solid" @change="handleChange1(years_1, materialType_1)">
					<a-radio-button value="1473944069297156097">原料</a-radio-button>
					<a-radio-button value="1843830985384407041">定制料</a-radio-button>
					<a-radio-button value="1473944715475824641">包材</a-radio-button>
					<a-radio-button value="1473944389062504450">线缆</a-radio-button>
				</a-radio-group>
				<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
				<div ref="charts" id="main1" style="width: 1000px;height:400px;"></div>
			</a-card>
		</a-row>

		<a-row style="width:70vw; margin-bottom:1000px;" v-if="false">
			<a-card title='经销商发货金额'>
				<div slot="extra">
					<a-form layout="inline">
						<a-form-item label="年份">
							<a-select mode="tags" size="small" :defaultValue="String(new Date().getFullYear())" placeholder="请选择年份"
								style="width: 200px" @change="handleChange2">
								<a-select-option :disabled='item.disable' :value="item.value" v-for="item in yearOptions"
									:key="item.value">
									{{ item.label }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-form>
				</div>
				<a-radio-group v-model="materialType_2" button-style="solid" @change="handleChange2(years_2, materialType_2)">
					<a-radio-button value="1473944069297156097">原料</a-radio-button>
					<a-radio-button value="1473944715475824641">包材</a-radio-button>
					<a-radio-button value="1473944389062504450">线缆</a-radio-button>
				</a-radio-group>

				<!-- <a-radio-group 
              v-if="materialType_2=='1473944069297156097'"
              style="margin-left:100px"
              button-style="solid"
              v-model="supplierId_2" 
              @change="handleChange2(years_2, materialType_2, supplierId_2)"
            >
                <a-radio-button value="">全部</a-radio-button>
                <a-radio-button value="1502530915877912578">上海壹充</a-radio-button>
                <a-radio-button value="1502530819023044609">惠州丝鹭</a-radio-button>
                <a-radio-button value="1498270916314161153">其他供应商</a-radio-button>
            </a-radio-group> -->
				<FCOrgRadioGroup v-if="materialType_2 == '1473944069297156097'" style="margin-left:100px" v-model="supplierId_2"
					@change="handleChange2(years_2, materialType_2, supplierId_2)"
					:filter-types="[$businessEnum.ORG_TYPE_ENUM.NORMAL_SUPPLIER.id, $businessEnum.ORG_TYPE_ENUM.PRIMARY_SUPPLIER.id]" />
				<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
				<div ref="charts" id="main2" style="width: 1000px;height:400px;"></div>
			</a-card>
		</a-row>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import countTo from 'vue-count-to'
import FCOrgRadioGroup from '@/components/FcOrgRadioGroup/FCOrgRadioGroup'
export default {
	components: {
		countTo,
		FCOrgRadioGroup
	},
	data() {
		return {
			yearOptions: [],
			total: 0,
			loading: false,
			queryParam: {},
			topInfoList: {},
			targetItem: 1,   //选中的时间项
			rowData: [],
			colData: [],
			topCardData: {},  //顶部选项卡数据
			targetList: '',
			years: [],
			years_1: [],
			years_2: [],
			materialType: '1473944069297156097',
			materialType_1: '1473944069297156097',
			materialType_2: '1473944069297156097',
			// supplierId_2:'1502530915877912578',  //默认上海一充
			supplierId_2: null,  //默认全部
			tableData: '',
			tableData1: '',
			tableData2: ''
		}
	},
	mounted() {
		// 调用方法生成年份数组
		this.yearOptions = this.createYearList();
		let year = String(new Date().getFullYear())
		this.handleChange([year])
		this.handleChange1([year])
		this.handleChange2([year])

		this.getTopData()
	},
	methods: {
		getTopData() {
			this.axios.post("/emsMaterialPool/warehouseCost", {}).then((res) => {
				if (res.success) {
					this.topInfoList = res.data
				}
			})
		},
		handleChange(value) {
			this.years = value
			this.getList(this.years, this.materialType)   //传入多选选中的年份数组

		},
		handleChange1(value) {
			this.years_1 = value
			this.getList1(this.years_1, this.materialType_1)   //传入多选选中的年份数组

		},
		handleChange2(value) {
			this.years_2 = value
			this.getList2(this.years_2, this.materialType_2, this.supplierId_2)   //传入多选选中的年份数组

		},
		// 获取图表数据
		getList(years, type) {
			this.axios.post("/emsMaterialPool/financialProcurement", { years: years, materialType: type }).then((res) => {
				if (res.success) {
					this.buildCharts(res.data)
				}
			})
		},
		// 获取图表数据
		getList1(years, type) {
			this.axios.post("/emsMaterialPool/financialCost", { years: years, materialType: type }).then((res) => {
				if (res.success) {
					this.buildCharts1(res.data)
				}
			})
		},
		// 获取图表数据
		getList2(years, type, id) {
			let params
			// 如果是原料
			if (this.materialType_2 == '1473944069297156097') {
				if (id == '1498270916314161153') {
					params = {
						years: years,
						materialType: type,
						isMainSupplier: 2,    //其他供应商
						supplierId: id
					}
				} else if (id == '') {
					params = {
						years: years,
						materialType: type,
						isMainSupplier: 3,   //全部
						supplierId: ''
					}
				} else {
					params = {
						years: years,
						materialType: type,
						isMainSupplier: 1,   //主要供应商
						supplierId: id
					}
				}
			}
			// 如果不是原料，就不要供应商筛选
			else {
				params = {
					years: years,
					materialType: type,
					isMainSupplier: 3,   //全部
					supplierId: ''
				}
			}

			this.axios.post("/emsMaterialPool/supplierSend", params).then((res) => {
				if (res.success) {
					this.buildCharts2(res.data)
				}
			})
		},

		buildCharts(responseData) {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('main'))
			let xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			let yData = []
			// 如果图表有数据
			if (responseData) {
				yData = responseData.map((item) => {
					return {
						name: item.year,
						type: "bar",
						barGap: 0,
						data: item.month,
					}
				})
			}


			// 指定图表的配置项和数据
			let option = {
				color: ["#ffdf25", "#36a9ce", "#d0e17d", '#ff5555'],
				tooltip: {

					formatter: (p) => {
						this.tableData = p
						let str = ''
						p.forEach((item, idx) => {
							str += `${item.marker}${item.seriesName}: ${item.data}`
							switch (idx) {
								case 0:
									str += ' ';
									break;
								default:
									str += ' '
							}
							str += idx === p.length - 1 ? '' : '<br/>'
						})
						return str
					},
					trigger: "axis",

					axisPointer: {
						type: "shadow",
					},
				},
				grid: {
					left: "5%",
					right: "5%",
					bottom: "10%",
					top: "15%",
					containLabel: true,
				},
				calculable: true,
				xAxis: [
					{
						type: "category",
						axisTick: { show: false },
						data: xData
					},
				],
				yAxis: [
					{
						type: "value",
						name: '单位：元'
					},
				],
				series: yData,
			}
			// 使用刚指定的配置项和数据显示图表。
			option && myChart.setOption(option, true)

			myChart.off('click')   //防止执行两次点击事件
			myChart.getZr().on('click', (p) => {
				const pointInPixel = [p.offsetX, p.offsetY];
				if (myChart.containPixel('grid', pointInPixel)) {

					// 原料采购
					if (this.materialType == '1473944069297156097') {
						this.$router.push({
							name: "myMaterial_order3",
							params: {
								year: this.tableData[0].seriesName,
								mounth: this.tableData[0].dataIndex + 1 < 10 ? ('0' + (this.tableData[0].dataIndex + 1)) : this.tableData[0].dataIndex + 1
							}
						})
					}
					//定制料采购
					if (this.materialType == '1843830985384407041') {
						this.$router.push({
							name: "myMaterial_order4",
							params: {
								year: this.tableData[0].seriesName,
								mounth: this.tableData[0].dataIndex + 1 < 10 ? ('0' + (this.tableData[0].dataIndex + 1)) : this.tableData[0].dataIndex + 1
							}
						})
					}
					// 包材采购
					if (this.materialType == '1473944715475824641') {
						this.$router.push({
							name: "myMaterial_order2",
							params: {
								year: this.tableData[0].seriesName,
								mounth: this.tableData[0].dataIndex + 1 < 10 ? ('0' + (this.tableData[0].dataIndex + 1)) : this.tableData[0].dataIndex + 1
							}
						})
					}
					// 线缆采购
					if (this.materialType == '1473944389062504450') {
						this.$router.push({
							name: "myMaterial_order1",
							params: {
								year: this.tableData[0].seriesName,
								mounth: this.tableData[0].dataIndex + 1 < 10 ? ('0' + (this.tableData[0].dataIndex + 1)) : this.tableData[0].dataIndex + 1
							}
						})
					}
				}
			});
		},
		buildCharts1(responseData) {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('main1'))
			let xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			let yData = []
			// 如果图表有数据
			if (responseData) {
				yData = responseData.map((item) => {
					return {
						name: item.year,
						type: "bar",
						barGap: 0,
						data: item.month,
					}
				})
			}


			// 指定图表的配置项和数据
			let option = {
				color: ["#ffdf25", "#36a9ce", "#d0e17d", '#ff5555'],
				tooltip: {

					formatter: (p) => {
						this.tableData1 = p
						let str = ''
						p.forEach((item, idx) => {
							str += `${item.marker}${item.seriesName}: ${item.data}`
							switch (idx) {
								case 0:
									str += ' ';
									break;
								default:
									str += ' '
							}
							str += idx === p.length - 1 ? '' : '<br/>'
						})
						return str
					},
					trigger: "axis",

					axisPointer: {
						type: "shadow",
					},
				},
				grid: {
					left: "5%",
					right: "5%",
					bottom: "10%",
					top: "15%",
					containLabel: true,
				},
				calculable: true,
				xAxis: [
					{
						type: "category",
						axisTick: { show: false },
						data: xData
					},
				],
				yAxis: [
					{
						type: "value",
						name: '单位：元'
					},
				],
				series: yData,
			}
			// 使用刚指定的配置项和数据显示图表。
			option && myChart.setOption(option, true)
			// myChart1.setOption(option1)

			myChart.off('click')   //防止执行两次点击事件
			myChart.getZr().on('click', (p) => {
				const pointInPixel = [p.offsetX, p.offsetY];
				if (myChart.containPixel('grid', pointInPixel)) {

					// this.$router.push({
					//   name: "ems_production_center_pool3",   //已完结生产单
					//   params:{
					//     year:this.tableData1[0].seriesName,
					//     mounth:this.tableData1[0].dataIndex+1 < 10 ? ('0'+(this.tableData1[0].dataIndex+1)) : this.tableData1[0].dataIndex+1
					//   }
					// })
					// 原料采购
					if (this.materialType_1 == '1473944069297156097') {
						this.$router.push({
							name: "ems_order_production_log1",
							params: {
								year: this.tableData1[0].seriesName,
								mounth: this.tableData1[0].dataIndex + 1 < 10 ? ('0' + (this.tableData1[0].dataIndex + 1)) : this.tableData1[0].dataIndex + 1
							}
						})
					}
					//定制料
					if (this.materialType_1 == '1843830985384407041') {
						this.$router.push({
							name: "ems_order_production_log4",
							params: {
								year: this.tableData1[0].seriesName,
								mounth: this.tableData1[0].dataIndex + 1 < 10 ? ('0' + (this.tableData1[0].dataIndex + 1)) : this.tableData1[0].dataIndex + 1
							}
						})
					}
					
					// 包材采购
					if (this.materialType_1 == '1473944715475824641') {
						this.$router.push({
							name: "ems_order_production_log3",
							params: {
								year: this.tableData1[0].seriesName,
								mounth: this.tableData1[0].dataIndex + 1 < 10 ? ('0' + (this.tableData1[0].dataIndex + 1)) : this.tableData1[0].dataIndex + 1
							}
						})
					}
					// 线缆采购
					if (this.materialType_1 == '1473944389062504450') {
						this.$router.push({
							name: "ems_order_production_log2",
							params: {
								year: this.tableData1[0].seriesName,
								mounth: this.tableData1[0].dataIndex + 1 < 10 ? ('0' + (this.tableData1[0].dataIndex + 1)) : this.tableData1[0].dataIndex + 1
							}
						})
					}
				}
			});
		},
		buildCharts2(responseData) {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('main2'))
			let xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			let yData = []
			// 如果图表有数据
			if (responseData) {
				yData = responseData.map((item) => {
					return {
						name: item.year,
						type: "bar",
						barGap: 0,
						data: item.month,
					}
				})
			}


			// 指定图表的配置项和数据
			let option = {
				color: ["#ffdf25", "#36a9ce", "#d0e17d", '#ff5555'],
				tooltip: {

					formatter: (p) => {
						this.tableData2 = p
						let str = ''
						p.forEach((item, idx) => {
							str += `${item.marker}${item.seriesName}: ${item.data}`
							switch (idx) {
								case 0:
									str += ' ';
									break;
								default:
									str += ' '
							}
							str += idx === p.length - 1 ? '' : '<br/>'
						})
						return str
					},
					trigger: "axis",

					axisPointer: {
						type: "shadow",
					},
				},
				grid: {
					left: "5%",
					right: "5%",
					bottom: "10%",
					top: "15%",
					containLabel: true,
				},
				calculable: true,
				xAxis: [
					{
						type: "category",
						axisTick: { show: false },
						data: xData
					},
				],
				yAxis: [
					{
						type: "value",
						name: '单位：元'
					},
				],
				series: yData,
			}
			// 使用刚指定的配置项和数据显示图表。
			option && myChart.setOption(option, true)
			// myChart1.setOption(option1)

			myChart.off('click')   //防止执行两次点击事件
			myChart.getZr().on('click', (p) => {
				const pointInPixel = [p.offsetX, p.offsetY];
				if (myChart.containPixel('grid', pointInPixel)) {
					// 原料采购
					if (this.materialType_2 == '1473944069297156097') {
						this.$router.push({
							name: "sys_fahuojilu_yl",
							params: {
								materialType: '1473944069297156097',
								supplierId: this.supplierId_2,
								year: this.tableData2[0].seriesName,
								mounth: this.tableData2[0].dataIndex + 1 < 10 ? ('0' + (this.tableData2[0].dataIndex + 1)) : this.tableData2[0].dataIndex + 1
							}
						})
					}
					// 包材采购
					if (this.materialType_2 == '1473944715475824641') {
						this.$router.push({
							name: "sys_fahuojilu_bc",
							params: {
								materialType: '1473944715475824641',
								// supplierId: this.supplierId_2,
								year: this.tableData2[0].seriesName,
								mounth: this.tableData2[0].dataIndex + 1 < 10 ? ('0' + (this.tableData2[0].dataIndex + 1)) : this.tableData2[0].dataIndex + 1
							}
						})
					}
					// 线缆采购
					if (this.materialType_2 == '1473944389062504450') {
						this.$router.push({
							name: "sys_fahuojilu_xl",
							params: {
								materialType: '1473944389062504450',
								// supplierId: this.supplierId_2,
								year: this.tableData2[0].seriesName,
								mounth: this.tableData2[0].dataIndex + 1 < 10 ? ('0' + (this.tableData2[0].dataIndex + 1)) : this.tableData2[0].dataIndex + 1
							}
						})
					}
				}
			});
		},
	}

}
</script>

<style lang="less" scoped>
.container {
	min-width: 1000px;
}

.title {
	color: rgba(16, 16, 16, 100);
	font-size: 14px;
	font-weight: bold;
}

.right {
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 100);
	box-sizing: border-box;
	padding: 20px;
	height: 500px;
}

.right-content-top {
	display: flex;
	justify-content: space-between;
}

.icon {
	font-size: 20px;
	margin: 0 5px;
}

// 顶部信息栏样式
.header-info {
	flex: 1;
	box-sizing: border-box;
	padding-left: 40px;
	height: 150px;

	.bg-info {
		height: 130px;

	}
}

.selectTime {
	margin-left: 10px;
	width: 50px;
	height: 25px;
	display: inline-block;
	text-align: center;
	user-select: none;
	cursor: pointer;
}

.targetItem {
	color: rgba(42, 130, 228, 1)
}

.top-center {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-size: 14px;
}

.top-bottom {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	font-size: 16px;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0.5
}

/deep/.ant-card-body {
	padding: 8px 20px !important;
}

.totayNum {
	font-size: 28px;
	font-weight: 600;
}

.icon-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
}

.tit {
	margin-top: 30px;

}

.num {
	margin-top: 15px;
}
</style>